<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('支付订单列表')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <p>月份：</p>
                            <input name="month" class="form-control" placeholder="yyyy-MM" th:value="${month}" type="text">
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <div class="flot-chart" style="height:600px;">
                <div class="flot-chart-content" id="flot-dashboard-chart"></div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
<th:block th:include="include :: sparkline-js"/>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">

    $("input[name='month']").datetimepicker({
        format: "yyyy-mm",
        weekStart: 1,
        autoclose: true,
        startView: 3,
        minView: 3,
        forceParse: false
    });

    $("input[name='month']").change(function(){
         var month = $(this).val();
         window.location = '/payment/payrate/paymonthstat?month=' + month;
    });

     $(document).ready(function () {

            var month = [[${month}]];

            option = {
                title: {
                    text: '充值每月统计',
                    subtext: month,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '充值应用',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: [[${dict}]], name: '字典'},
                            {value: [[${poem}]], name: '古诗词典'},
                            {value: [[${wyw}]], name: '文言文'},
                            {value: [[${yuwenWeixin}]], name: '语文100分(其它)'},
                            {value: [[${dictkx}]], name: '康熙字典'},
                            {value: [[${dictsw}]], name: '说文解字'},
                            {value: [[${dictchengyu}]], name: '成语词典'},
                            {value: [[${cidianhy}]], name: '汉语词典'},
                            {value: [[${gs300}]], name: '古诗300首'},
                            {value: [[${kkdictios}]], name: '字典iOS'},
                            {value: [[${dictkxios}]], name: '康熙字典iOS'},
                            {value: [[${dictswios}]], name: '说文解字iOS'},
                            {value: [[${poemios}]], name: '古诗词iOS'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var myChart = echarts.init(document.getElementById('flot-dashboard-chart'));
            myChart.setOption(option);

	    });

</script>
</body>
</html>